<template>
  <el-dialog title="职位信息" :visible.sync="localVisible" width="60%" custom-class="recruit-dialog" @close="handleClose">

    <AddRecruitDialog :visible.sync="addRecruitDialogVisible" @submit="handleAddRecruitSubmit"></AddRecruitDialog>
    
    <!-- 自定义标题 -->
    <div slot="title" class="dialog-title">
      <span>职位信息</span>
    </div>

    <!-- 表格内容 -->
    <div v-if="recruitInfoList.length > 0">
      <el-table :data="recruitInfoList" border style="width: 100%" class="custom-table">
        <el-table-column prop="jobName" label="职位名称" align="center"></el-table-column>
        <el-table-column prop="jobDescribe" label="职位职责" align="center"></el-table-column>
        <el-table-column prop="demand" label="专业需求" align="center"></el-table-column>
        <el-table-column prop="minSalary" label="最低薪资" align="center"></el-table-column>
        <el-table-column prop="maxSalary" label="最高薪资" align="center"></el-table-column>
        <el-table-column prop="jobAddress" label="工作地点" align="center"></el-table-column>
        <el-table-column prop="jobRequire" label="职位要求" align="center"></el-table-column>
        <el-table-column prop="jobBenefits" label="福利" align="center"></el-table-column>
        <el-table-column prop="jobStatus" label="职位情况" align="center" :formatter="formatJobState"></el-table-column>
        <el-table-column prop="jobUpdateTime" label="发布时间" align="center"></el-table-column>
      </el-table>
    </div>
    <div v-else class="no-data">
      <p>暂无职位信息</p>
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button type="primary" plain @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>

  
<script>
import AddRecruitDialog from './AddRecruitDialog.vue';
export default {
  components: {
    AddRecruitDialog,
  },
    name: "RecruitInfoDialog",
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      recruitInfoList: {
        type: Array,
        default: () => [],
      },
      userType: {  // 新增：接收用户类型
        type: Number,
        required: true
      }
    },
    data() {
      return {
        addRecruitDialogVisible: false, // 控制新增职位对话框的显示状态
        localVisible: this.visible, // 创建本地变量
      };
    },
    watch: {
      // 监听父组件传递的 visible 变化，并同步到本地变量
      visible(newVal) {
        this.localVisible = newVal;
      },
    },
  methods: {
    handleClose() {
      this.$emit("update:visible", false); // 通知父组件关闭对话框
    },
    closeDialog() {
      this.$emit("update:visible", false); // 通知父组件关闭对话框
    },

    openAddRecruitDialog() {
      this.addRecruitDialogVisible = true;
    },
    handleAddRecruitSubmit(formData) {
      console.log("新增职位数据:", formData);
      // 在这里调用 API 提交数据
      this.$message.success("新增职位成功！");
    },
    // 格式化 jobStatus 的值
    formatJobState(row, column, cellValue) {
        const status = Number(cellValue); // 确保是数字类型
        switch (status) {
          case 1:
            return "在招";
          case 2:
            return "停止招聘";
          default:
            return "未知状态";
        }
      },
      
    },
  };
  </script>

<style scoped>
/* 对话框整体样式 */
.recruit-dialog {
  max-height: 80vh; /* 限制对话框的最大高度 */
  overflow-y: auto; /* 如果内容超出，允许滚动 */
}

/* 表格样式 */
.custom-table {
  font-size: 14px; /* 字体大小 */
  line-height: 1.5; /* 行高 */
}

.custom-table th,
.custom-table td {
  padding: 12px; /* 单元格内边距 */
  word-break: break-word; /* 长单词自动换行 */
}

/* 无数据时的提示样式 */
.no-data {
  text-align: center;
  font-size: 16px;
  color: #999;
  margin-top: 20px;
}

/* 对话框标题样式 */
.dialog-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* 新增职位按钮样式 */
.add-recruit-button {
  margin-left: 20px; /* 按钮与标题的距离 */
}
</style>